<template>
  <div class="body-wrapper">
    <template v-for="msgObj in CHAT.msgArr">
      <template v-if="msgObj.cmd!='EVENT_MESSAGE'">
        <system-msg :msg="msgObj.msg" :timestamp="msgObj.timestamp"></system-msg>
      </template>
      <template v-if="msgObj.cmd==='EVENT_MESSAGE'">
        <other-msg  v-if="msgObj.userid!=CHAT.userid" :name="msgObj.username" :msg="msgObj.msg" :color="msgObj.color" :timestamp="msgObj.timestamp"></other-msg>
      <self-msg v-if="msgObj.userid==CHAT.userid" :msg="msgObj.msg" :color="msgObj.color"></self-msg>
      </template>
    </template>
  </div>
</template>

<script>
import OtherMsg from './OtherMsg'
import SelfMsg from './SelfMsg'
import SystemMsg from './SystemMsg'

import CHAT from '../../api/wsclient'
export default {
  data () {
    return {
      CHAT
    }
  },
  props: {
    roomid: {
      type: String,
      default () {
        return '';
      }
    }
  },
  components:{
    OtherMsg,
    SelfMsg,
    SystemMsg
  },
  methods:{
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
.body-wrapper{
  background-color: #f6f6f6;
  /*height:80%;*/
  /*height: ~'calc(100% - 20px)';*/
  overflow-y: scroll;
  min-height: 180px;
  max-height: 280px;
}
</style>
